<template>
  <div class="container">
    <el-row :gutter="10">
      <!-- tree树形控件 -->
      <el-col :span="4" :xs="24">
        <el-card>
          <!-- search -->
          <div class="head-container">
            <el-input
              v-model="deptName"
              :placeholder="$t('device.list.input.department')"
              clearable
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container">
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="true"
              :filter-node-method="filterNode"
              ref="tree"
              accordion
              node-key="id"
              @node-click="handleNodeClick"
              :default-expanded-keys="expandedKeys"
              highlight-current
            />
          </div>
        </el-card>
      </el-col>
      <!-- table -->
      <el-col :span="20" :xs="24" v-show="isShow">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          tooltip-effect="dark"
          style="width: 100%"
          max-height="500"
          border
          highlight-current-row
        >
          <!-- 网卡卡号 -->
          <el-table-column label="网卡卡号" width="125" align="center" v-if="columns[0].visible">
          </el-table-column>
          <!-- 设备号 -->
          <el-table-column label="设备号" width="125" align="center" v-if="columns[1].visible">
          </el-table-column>
          <!-- 套餐信息 -->
          <el-table-column label="套餐信息" align="center">
            <!-- 价格 -->
            <el-table-column label="价格" width="125" align="center" v-if="columns[2].visible">
            </el-table-column>
            <!-- 有效期 -->
            <el-table-column label="有效期" width="125" align="center" v-if="columns[3].visible">
            </el-table-column>
            <!-- 套餐明细 -->
            <el-table-column label="套餐明细" width="125" align="center" v-if="columns[4].visible">
            </el-table-column>
            <!-- 充值记录 -->
            <el-table-column label="充值记录" width="125" align="center" v-if="columns[5].visible">
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { treeselect } from '@/api/system/dept' // import treeselect api
export default {
  data () {
    return {
      loading: false, // 遮罩层
      deptName: undefined, // 部门名称
      isShow: true, // 是否显示
      deptOptions: undefined, // 部门树选项
      defaultProps: {
        children: 'children', // 指定子树为节点对象的某个属性值
        label: 'label' // 指定节点标签为节点对象的某个属性值
      },
      expandedKeys: [], // 默认打开的节点
            // 表格列信息
      columns: [
        { key: 0, label: `网卡卡号`, visible: true },
        { key: 1, label: `设备号`, visible: true },
        { key: 2, label: `价格`, visible: true },
        { key: 3, label: `有效期`, visible: true },
        { key: 4, label: `套餐明细`, visible: true },
        { key: 5, label: `充值记录`, visible: true },
      ]
    }
  },
  methods: {
    // 查询部门下拉树结构
    getTreeselect () {
      treeselect()
        .then(response => {
          this.deptOptions = response.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 筛选节点
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件获得树结构Id
    handleNodeClick (data) {
      //   console.log(data)
    }
  },
  created () {
    this.getTreeselect() // 部门数据
  },
  mounted () {},
  watch: {
    // 根据名称筛选部门树
    deptName (val) {
      this.$refs.tree.filter(val)
    },
    // 默认展开tree节点
    deptOptions: {
      handler () {
        this.deptOptions.forEach(item => {
          this.expandedKeys.push(item.id)
        })
      },
      deep: true
    }
  }
}
</script>
